<template>
  <div class="Mheader">
    <header>
      <div class="head">
        <p>我的</p>

        <p><router-link to="/Setting">设置</router-link></p>

      </div>
      <div class="person">
        <div class="per_img">
          <img src="../../static/img/mine/mine_03.jpg">
        </div>
        <div class="per_info">
          <p>杨大力</p>
          <p>152****9257</p>
        </div>
        <div class="per_more">
          <router-link to="/Personal"><img src="../../static/img/mine/right_03.jpg"/></router-link>
        </div>
      </div>
    </header>

  </div>
</template>

<script>
    export default {
        name: "app-mhead"
    }
</script>

<style scoped>
  header{
    background: #1e82d2;
    color: #fff;
    padding: 0 .8rem;
  }
  header .head{
    display: flex;
    padding: .8rem 0;
    font-size: 1.2rem;
  }
  header .head p:first-child{
    width: 57%;
    text-align: right;
  }
  header .head p:last-child{
    text-align: right;
    width: 43%;
  }

  header div.person{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 0;
  }
  header div.person div{
    width: 33%;
    text-align: center;
  }
  header div.person .per_img img{
    width: 80%;
  }
  header div.person .per_info{
    text-align: left;
  }
  header div.person .per_info p{
    padding: .2rem .5rem;
    color: #98c7eb;
  }
  header div.person .per_info p:first-child{
    font-size: 1.2rem;
    color: #fff;
  }
  header div.person .per_more{
    text-align: right;
  }
  .per_more img{
    width: 1rem;
    height: 1.6rem;
  }
  header a{
    color: #fff;
  }

  footer ul.f-list li.f-home i{
    background: url(../../static/img/mine/mine_01.jpg) no-repeat;
    background-size: 100%;
  }
  footer ul li.f-mine i{
    background: url(../../static/img/mine/mine_26.jpg) no-repeat;
    background-size: 100%;
  }
</style>
